<template>
  <div class="container">
    <div class="login-container">
      <div class="left-img">
        <img src="@/assets/img/login_container.png" alt="" />
      </div>
      <div class="right-content">
        <LoginForm></LoginForm>
      </div>
    </div>
  </div>
</template>

<script>
import LoginForm from "@/components/login/LoginForm";
export default {
  name: "Login",
  components: { LoginForm },
};
</script>

<style lang="scss">
.container {
  position: relative;
  background: url("../assets/img/login_background.jpg") no-repeat;
  width: 100%;
  height: 100vh;
  .login-container {
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 550px;
    border-radius: 50px !important;
    transform: translate(-50%, -50%);
    overflow: hidden;
    .left-img {
      background-color: #fff;
      flex: 1;
      img {
        width: 400px;
        height: 430px;
        margin: 50px 60px;
      }
    }
    .right-content {
      flex: 1;
    }
  }
}
</style>